<template>
  <div class="wrap clearfix">
    <div class="location">
      当前位置：首页<span>&gt;</span><b class="red">购物车</b>
    </div>
    <CommoDity
      :list="list"
      @chanshu="chanshu"
      @zhengjia="zhengjia"
      @jianshao="jianshao"
    ></CommoDity>
  </div>
</template>

<script>
import CommoDity from "./components/CommoDity.vue";
export default {
  components: {
    CommoDity,
  },

  data() {
    return {

      list: [
        {
          name: "凌美Lamy Safari钢笔/签字笔T52黑色墨水<",
          id: 0,
          oldPrice: 158.0,
          price: 129.0,
          count: 1,
          img: "https://img-blog.csdnimg.cn/20200520143727974.jpg",
          isSelected: false,
        },
        {
          name: "凌美Lamy Safari钢笔/签字笔T52黑色墨水<",
          id: 1,
          oldPrice: 158.0,
          price: 145.0,
          count: 1,
          img: "https://img-blog.csdnimg.cn/20200520143752215.jpg",
          isSelected: true,
        },
        {
          name: "德国进口 凌美(LAMY)签字笔钢笔墨水水笔专用一次性墨水胆笔芯5支一盒T10德国进口",
          id: 2,
          oldPrice: 158.0,
          price: 130.0,
          count: 1,
          img: "https://img-blog.csdnimg.cn/20200520143746317.jpg",
          isSelected: true,
        },
      ],
    };
  },

  methods: {
    chanshu(id) {
      const list = this.list.findIndex((item) => {
        return item.id === id;
      });

      this.list.splice(list, 1);
    },

    zhengjia(id) {
      const sec = this.list.find((item) => {
        return item.id === id;
      });
      sec.count++;
    },
    jianshao(id) {
      const sec = this.list.find((item) => {
        return item.id === id;
      });
      if (sec.count) {
        sec.count--;
      } else {
        return;
      }
    },
  },

};
</script>

<style>
/* 公共样式 */
.clearfix {
  content: "";
  display: block;
  clear: both;
}

.red {
  color: #f30213;
}
</style>